import { Editor } from '@/components';
import { ConfigProvider, Tabs, message } from 'antd';
import { clone, cloneDeep } from 'lodash-es';
import { useEffect } from 'react';
import { useModel } from 'umi';

const log = console.log.bind(null, '[PropertyPanel]');

export function PropertyPanel() {
  const {
    plank,
    holeId,
    setHoleId,
    grooveId,
    setGrooveId,
    setPlank,
    updatePlank,
    refreshPlanks,
    setBasis,
  } = useModel('bom');
  const { onTabChange } = useShowProfileTipPoint();

  return (
    <ConfigProvider theme={{ token: { fontSize: 12 } }}>
      {plank && (
        <Editor
          value={plank}
          holeId={holeId}
          grooveId={grooveId}
          onBasisChange={setBasis}
          onChange={async (value, editTypes) => {
            log('onChange', value, editTypes);
            try {
              setPlank(value);
              // await updatePlank(value, editTypes);
              // message.success('更新成功');
              // await refreshPlanks({ orderId: value.orderId });
            } catch (error) {
              console.error(error);
              message.error(`更新失败: ${(error as Error).message}`);
            }
            // setPlankData(value);
          }}
          onSelectHole={(holeId) => {
            // log('onSelectHole', holeId);
            setHoleId(holeId);
          }}
          onSelectGroove={(grooveId) => {
            // log('onSelectGroove', grooveId);
            setGrooveId(grooveId);
          }}
          onTabChange={onTabChange}
        />
      )}
    </ConfigProvider>
  );
}

function useShowProfileTipPoint() {
  const { setIsShowProfileTipPoint } = useModel('StageCanvas');
  useEffect(() => {
    setIsShowProfileTipPoint(true);
  }, []);
  const onTabChange: GetProp<typeof Tabs, 'onChange'> = (activeKey) => {
    setIsShowProfileTipPoint(activeKey === 'plank');
  };
  return { onTabChange };
}
